<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>EasyUI&nbsp;Demo&nbsp;-&nbsp;SearchBox</title>
        <link rel="shortcut icon" href="../../assets/image/favicon.ico"/>
        <script type="text/javascript" src="../../assets/js/common.js"></script>
        <link rel="stylesheet" type="text/css" href="../../assets/libs/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../assets/libs/easyui/themes/icon.css">
        <script type="text/javascript" src="../../assets/libs/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="../../assets/libs/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
        <h1>SearchBox&nbsp;-&nbsp;Base&nbsp;基础组件</h1>
        <fieldset>
            <legend>使用案例</legend>
            <h2>创建查询框</h2>
            <p>1. 使用标签创建。添加'easyui-searchbox'类ID到< input/>标签。</p>
            <script type="text/javascript">
                function qq(value, name) {
                    alert(name + ":" + value);
                }
            </script>
             
            <input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value',menu:'#mm'">
             
            <div id="mm" style="width:120px">
                <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
                <div data-options="name:'sports'">Sports News</div>
                <div data-options="name:'option3'">Option3</div>
                <div data-options="name:'option4'">Option4</div>
            </div>
            <p>2. 创建程序。</p>
            <input id="ss2"/>
            <div id="mm2">
                <div data-options="name:'all',iconCls:'icon-ok'">All News</div>
                <div data-options="name:'sports'">Sports News</div>
            </div>
        </fieldset>
    </body>
    <script type="text/javascript">
        $('#ss2').searchbox({
            searcher:function(value,name){
                alert(name + ":" + value);
            },
            menu:'#mm2',
            prompt:'请输入搜索内容',
            width: 350,
            height: 45,
            value: 'UserName',
            disabled: false,
        });
        var m = $('#ss2').searchbox('menu');
        console.log("menu:", m);
        var item = m.menu('findItem', 'Sports News');
        console.log("查找结果：", item);
        m.menu('setIcon', {
            target: item.target,
            iconCls: 'icon-save'
        });
        console.log('textbox：', $('#ss2').searchbox('textbox'));
        $('#ss2').searchbox('setValue', 'new value');
        console.log('getValue：', $('#ss2').searchbox('getValue'));
        console.log('getName：', $('#ss2').searchbox('getName'));
    </script>
</html>